<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
         .numinput{
             width: 20px;
         }
    </style>
</head>
<body>
    
    <div id="app">
        <!-- <ul>
            <li v-for="item in goodsList">
                商品：{{item.name}} 商品单价{{item.price}}
            </li>
        </ul> -->

        <table border="1">

              <thead>
                   <th>名称</th>
                   <th>单价</th>
                   <th>数量</th>
                   <th>小计</th>
              </thead>

              <tbody>
                   <tr v-for="(item,i) in goodsList">
                       <td>{{item.name}}</td>
                       <td>{{item.price | filterMsg}}</td>
                       <td>
                           <button @click="reduce(i)">-</button>
                           <input class="numinput" type="text" v-model="item.num" />
                           <button @click="add(i)">+</button>
                        
                        </td>
                       <td>{{item.price*item.num | filterMsg}}</td>
                   </tr>
              </tbody>
              
        </table>
      总价：{{total | filterMsg}}
    </div>

    <script src="js/vue.js"></script>
    <script>
        // 全局过滤
        // Vue.filter("filterMsg",(val)=>{
        //     console.log(val);

        //     return val.toFixed(2)+"真棒"
        // })

       let vm= new Vue({
            el:"#app",
            filters:{ // 局部过滤
                filterMsg(val){
                    return val.toFixed(2)
                }
            },
            created() {

                for (let i = 0; i < this.goodsList.length; i++) {
                //    console.log(this.goodsList[i])
                 
                   this.goodsList[i].num=1
                    
                }
                 
            },
            data:{
               goodsList:[
                   {
                       name:"衣服",
                       price:100,
                    //    num:1,//数量
                       desc:"冬季爆款"
                   },
                   {
                       name:"鞋子",
                       price:50,
                    //    num:1,//数量
                       desc:"保暖鞋子"
                   },
                   {
                       name:"奶粉",
                       price:500,
                    //    num:1,//数量
                       desc:"奶粉desc"
                   }
               ]
            },
            computed:{

                total(){// 计算总价钱
                    let sum=0;
                    for (let index = 0; index < this.goodsList.length; index++) {
                        sum+=this.goodsList[index].price*this.goodsList[index].num
                        
                    }
                    return sum;
                }
            },
            methods: { 
                add(index){ //增加商品
                    this.goodsList[index].num+=1
                },
                reduce(index){ // 减少商品，最少购买一件
                    if(this.goodsList[index].num<=1){

                        alert("最少购买一件")
                        return;
                    }
                    this.goodsList[index].num-=1
                }
             }
            
        })
    </script>
</body>
</html>